<include file="Public/head"/>
   <meta name="description" content="Dynamic tables and grids using jqGrid plugin" />
        <link rel="stylesheet" href="__PUBLIC__/assets/css/bootstrap.css" />
		<link rel="stylesheet" href="__PUBLIC__/assets/css/font-awesome.css" />

		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="__PUBLIC__/assets/css/jquery-ui.css" />
		<link rel="stylesheet" href="__PUBLIC__/assets/css/datepicker.css" />
		<link rel="stylesheet" href="__PUBLIC__/assets/css/ui.jqgrid.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="__PUBLIC__/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="__PUBLIC__/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />

		<script src="__PUBLIC__/assets/js/ace-extra.js"></script>
<body class="no-skin">
<include file="Public/header"/>
<include file="Public/sidebarstu"/>
    <div class="main-content">
        <div class="main-content-inner">
        <!-- 横向菜单 -->
            <include file="Public/stutopsidebar"/>


               <div style="width: 100% " class="tab-pane">
		               <table id="grid-table" style="background: #fff"></table> 
			           <div id="grid-pager"></div>
	           </div>
             
        </div>
     </div>

     <include file="Public/footer"/>
     <include file="Public/footerjs"/>



        <script type="text/javascript">
			window.jQuery || document.write("<script src='__PUBLIC__/assets/js/jquery.js'>"+"<"+"/script>");
		</script>





		<script src="__PUBLIC__/assets/js/bootstrap.js"></script>

		<!-- page specific plugin scripts -->
		<script src="__PUBLIC__/assets/js/date-time/bootstrap-datepicker.js"></script>
		<script src="__PUBLIC__/assets/js/jqGrid/jquery.jqGrid.src.js"></script>
		<script src="__PUBLIC__/assets/js/jqGrid/i18n/grid.locale-cn.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
		
			
			jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
				
				
			
			   //页面宽度改变时，改变表格宽度
				$(window).on('resize.jqGrid', function () {
					var parent_width = $(grid_selector).closest('.tab-pane').width();
					$(grid_selector).jqGrid( 'setGridWidth', parent_width );
				})
					
			  
                // var dd="[<?php foreach($ccc as $k=>$v){echo '{name:'.$v[name].',index:'.$v[index].', width:60,fixed:true}'; }?>]";
				jQuery(grid_selector).jqGrid({
					//direction: "rtl",
			        
					//subgrid options
					// treeGrid:true,
					 rownumbers:true,
					autowidth:true,
					subGrid : false,   
			        forceFit:true,
			        url:'{:U("Province/getProvinceData")}',
			        // rownumbers:true,
					// data: grid_data,
					// cellEdit:true,
					datatype: "json",
					height: '80%',
					viewrecords : true,
					rowNum:20,
					rowList:[20,30,40],
					pager : pager_selector,
					altRows: true,
					//toppager: true,					
					multiselect: true,
					//multikey: "ctrlKey",
			        multiboxonly: true,
					colNames:{$aa},
					editurl: "{:U('Pedit')}",
					caption: "省级生源信息管理",
					//colModel:{$colModel}, 
                   colModel:[<?php foreach($ccc as $k=>$v){echo '{name:"'.$v[name].'",index:"'.$v[index].'",width:'.$v[width].',fixed:'.$v[fixed].',formatter:"'.$v[formatter].'",editoptions:'.$v[editoptions].',editable:'.$v[editable].',frozen:'.$v[frozen].',key:'.$v[key].',formatoptions:'.$v[formatoptions].',edittype:"'.$v[edittype].'",formoptions:'.$v[formoptions].',resizable:'.$v[resizable].'},'; }?>],
				    // height: 'auto',
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
			         ondblClickRow:function(rowid,iRow,iCol,e){
                            console.log(rowid+'--'+iRow+'--'+iCol+'--'+e);
			         },

				});       
               jQuery(grid_selector).jqGrid('setFrozenColumns');		
			
				//enable search/filter toolbar
				// jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
				//jQuery(grid_selector).filterToolbar({});

				//navButtons
				jQuery(grid_selector).jqGrid('navGrid',pager_selector,
					{ 	//navbar options
						edit: true,
						editicon : 'ace-icon fa fa-pencil blue',
						add: true,
						addicon : 'ace-icon fa fa-plus-circle purple',
						del: true,
						delicon : 'ace-icon fa fa-trash-o red',
						search: true,
						searchicon : 'ace-icon fa fa-search orange',
						refresh: true,
						refreshicon : 'ace-icon fa fa-refresh green',
						view: true,
						viewicon : 'ace-icon fa fa-search-plus grey',
					},
					{
						//edit record form
						//closeAfterEdit: true,
						//width: 700,
                        width:1200,
						// height:1200,
						recreateForm: true,
						url:"{:U('Pedit')}",
						closeAfterEdit:true,
						closeOnEscape:true,
						beforeShowForm : function(e) {
							// console.log(e);

							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//new record form
						//width: 700,
						url:"{:U('Padd')}",
						 width:1200,
						// height:1200,

						closeOnEscape:true,
						closeAfterAdd: true,
						recreateForm: true,
						viewPagerButtons: false,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
							.wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//delete record form
						top:500,
						left:500,
						recreateForm: true,
						url:'{:U("Pdel")}',
						// beforeShowForm : function(e) {
						// 	var form = $(e[0]);
						// 	if(form.data('styled')) return false;
							
						// 	form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
						// 	style_delete_form(form);
							
						// 	form.data('styled', true);
						// },
						
					},
					{
						//search form
						recreateForm: true,
						afterShowSearch: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
							style_search_form(form);
						},
						afterRedraw: function(){
							style_search_filters($(this));
						}
						,
						multipleSearch: true,
						/**
						multipleGroup:true,
						showQuery: true
						*/
					},
					{
						//view record form
						recreateForm: true,
						 width:1200,
						// height:700,
						beforeShowForm: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						}
					}
				)
			
			
				
				function style_edit_form(form) {
					//enable datepicker on "sdate" field and switches for "stock" field
					form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
					
					form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
							   //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
							  //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
			
							
					//update buttons classes
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
					buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
					
					buttons = form.next().find('.navButton a');
					buttons.find('.ui-icon').hide();
					buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
					buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');		
				}
			
				function style_delete_form(form) {
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
					buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
				}
				
				function style_search_filters(form) {
					form.find('.delete-rule').val('X');
					form.find('.add-rule').addClass('btn btn-xs btn-primary');
					form.find('.add-group').addClass('btn btn-xs btn-success');
					form.find('.delete-group').addClass('btn btn-xs btn-danger');
				}
				function style_search_form(form) {
					var dialog = form.closest('.ui-jqdialog');
					var buttons = dialog.find('.EditTable')
					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
				}
				
				function beforeDeleteCallback(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);
					
					form.data('styled', true);
				}
				
				function beforeEditCallback(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			
			
			
				//it causes some flicker when reloading or navigating grid
				//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
				//or go back to default browser checkbox styles for the grid
				function styleCheckbox(table) {
				/**
					$(table).find('input:checkbox').addClass('ace')
					.wrap('<label />')
					.after('<span class="lbl align-top" />')
			
			
					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
					.find('input.cbox[type=checkbox]').addClass('ace')
					.wrap('<label />').after('<span class="lbl align-top" />');
				*/
				}
				
			
				//unlike navButtons icons, action icons in rows seem to be hard-coded
				//you can change them like this in here if you want
				function updateActionIcons(table) {
					/**
					var replacement = 
					{
						'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
						'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
						'ui-icon-disk' : 'ace-icon fa fa-check green',
						'ui-icon-cancel' : 'ace-icon fa fa-times red'
					};
					$(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
					*/
				}
				
				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = 
					{
						'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
						'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
						'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
						'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
					};
					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
				}
			
				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({container:'body'});
					$(table).find('.ui-pg-div').tooltip({container:'body'});
				}
			
				//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
			
				$(document).one('ajaxloadstart.page', function(e) {
					$(grid_selector).jqGrid('GridUnload');
					$('.ui-jqdialog').remove();
				});
			});
		</script>

		<!-- the following scripts are used in demo only for onpage help and you don't need them -->
		<link rel="stylesheet" href="__PUBLIC__/assets/css/ace.onpage-help.css" />
		<link rel="stylesheet" href="__PUBLIC__/docs/assets/js/themes/sunburst.css" />

		<script type="text/javascript"> ace.vars['base'] = '..'; </script>
		<script src="__PUBLIC__/assets/js/ace/elements.onpage-help.js"></script>
		<script src="__PUBLIC__/assets/js/ace/ace.onpage-help.js"></script>
		<script src="__PUBLIC__/docs/assets/js/rainbow.js"></script>
		<script src="__PUBLIC__/docs/assets/js/language/generic.js"></script>
		<script src="__PUBLIC__/docs/assets/js/language/html.js"></script>
		<script src="__PUBLIC__/docs/assets/js/language/css.js"></script>
		<script src="__PUBLIC__/docs/assets/js/language/javascript.js"></script>
</body>
</html>